 <template>
     <div>
       <!-- 评论列表 -->
       <div class="cmt-list" :class="{'art-cmt-container-1':isshow,'art-cmt-container-2':!isshow}">
         <!-- 评论的 Item 项 -->
         <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
          >
         <div class="cmt-item" v-for="(item) in commenarr" :key="item.com_id">
           <!-- 头部区域 -->
           <div class="cmt-header">
             <!-- 头部左侧 -->
             <div class="cmt-header-left">
               <img :src="item.aut_photo" alt="" class="avatar">
               <span class="uname">{{item.aut_name}}</span>
             </div>
             <!-- 头部右侧 -->
             <div class="cmt-header-right">
               <van-icon name="like" size="16" color="red" v-if="item.is_liking"  @click="dianzan(true,item.com_id)"/>
               <van-icon name="like-o" size="16" color="gray" v-else @click="dianzan(false,item.com_id)"/>
             </div>
           </div>
           <!-- 主体区域 -->
           <div class="cmt-body">
                   {{item.content}}
           </div>
           <!-- 尾部区域 -->
           <div class="cmt-footer">{{timeAgo(item.pubdate)}}</div>
         </div>
         </van-list>
       </div>
       <!-- 发布评论容器 -->
       <div>
         <!-- 底部添加评论区域 - 1 -->
             <div class="add-cmt-box van-hairline--top" v-if="isshow">
                <van-icon name="arrow-left" size="0.48rem" @click="$router.back()" />
                <div class="ipt-cmt-div" @click="qiehuan">发表评论</div>
                <div class="icon-box">
                    <van-badge>
                        <van-icon name="comment-o" size="0.53333334rem"  :badge="total || ''" @click="gundong"/>
                    </van-badge>
                    <van-icon name="star-o" size="0.53333334rem" />
                    <van-icon name="share-o" size="0.53333334rem" />
             </div>
           </div>
           <!-- 底部添加评论区域 - 2 -->
            <div class="cmt-box van-hairline--top" v-else>
                <textarea placeholder="友善评论、理性发言、阳光心灵" v-fofo @blur="shijiao" v-model.trim="value"></textarea>
                <van-button type="default" :disabled="value==''? true:false " @click="fabu">发布</van-button>
            </div>
       </div>
     </div>
</template>

<script>
import {pinglunApi,pingdianzan,pingquxiao,tianpinglun} from '@/api/index.js'
import {timeAgo} from '@/utils/date.js'
import { Toast } from 'vant'
export default {
  data(){
    return{
        offset:null, //文章评论每次的偏移量
        commenarr:[],  //评论数据列表
        isshow:true, //控制评论的显示与隐藏
        total:0,   //评论的总数量
        value:'',
        loading:false, //加载状态
        finished:false, //全部加载完成状态
    }
  },
  methods:{
    timeAgo,//时间过滤函数
   async dianzan(istrue,id){
           if(istrue){//代表用户已经点赞,此次点击是为了取消点赞
             await pingquxiao(id)
             const req=await pinglunApi({
             source:this.$route.query.id,
        })
         this.commenarr=req.data.data.results
         Toast.success('取消点赞');
           }else{ //代表用户没有点赞,此次点击是为了点赞
             await pingdianzan(id)
              const req=await pinglunApi({
             source:this.$route.query.id,
          })
           this.commenarr=req.data.data.results
            Toast.success('点赞成功');
           }
    },
    qiehuan(){ //点击切换输入框事件
        this.isshow=false
    },
    gundong(){ //点击评论滚动事件
      // let artiheigth=document.querySelector('.article-container').scrollHeight
      // //window.scrollTo可以使网页进行滚动,设置相应的坐标就可以滚动到相应的位置
      // //如果下面没有内容,则不再滚动
      //   window.scrollTo(0,artiheigth)
      //scrollIntoView标签可以使元素滚动到浏览器可视区域最上方
      //此方法默认是true,让元素顶部与可视区顶部对齐,fasle则表示元素底部与可视区底部对齐
      //如果底下没有内容则会只滚动到可视区域即可
       document.querySelector('.like-box').scrollIntoView({ 
         behavior:'smooth'  //表示过度的动画属性
       })
    },
   async fabu(){  //点击发布评论的点击事件
    const req=await tianpinglun(this.$route.query.id,this.value)  //发送请求添加数据
        this.commenarr.unshift(req.data.data.new_obj)
     this.gundong()
    },
    shijiao(){ //输入框失去焦点的函数
    //因为一但失去焦点 isshow为true的话,v-if就会把标签删除,所以里面的代码来不及执行,所以利用延时器异步操作
      setTimeout(()=>{  //利用延时器异步执行里面的代码
        this.isshow=true; 
        this.value=''
      },0)
    },
   async onLoad(){  //滚动到底触发事件
                    //表示还有数据接着获取
                 //防止滚动条初始化加载评论
                  const req=await pinglunApi({  //再次发送请求获取更多的评论
                   source:this.$route.query.id,
                   offset:this.offset
                  })
                this.commenarr=[...this.commenarr,...req.data.data.results]  //将新获取的评论和之前评论进行合并
                this.offset=req.data.data.last_id  //将offset赋值给新获取的last_id值
                this.loading=false  //将状态设置为fasle
                if(req.data.data.last_id==null){  //如果下一页没有数据了就将全部加载完成变成true
                  console.log('到底了');
                   this.finished=true
                }
         }
  },
 async created(){ //组件加载获取数据
     const req=await pinglunApi({
        source:this.$route.query.id,
     })
     this.commenarr=req.data.data.results
     this.total=req.data.data.total_count
     this.offset=req.data.data.last_id
     if(this.commenarr.length==0){  //如果第一次请求就没有数据 说明没有数据 直接表示加载完成即可
       this.finished=true
     }
  },
}
</script>

<style scoped lang="less">
   .cmt-list {
     padding: 10px;
     .cmt-item {
       padding: 15px 0;
       + .cmt-item {
         border-top: 1px solid #f8f8f8;
       }
       .cmt-header {
         display: flex;
         align-items: center;
         justify-content: space-between;
         .cmt-header-left {
           display: flex;
           align-items: center;
           .avatar {
             width: 40px;
             height: 40px;
             background-color: #f8f8f8;
             border-radius: 50%;
             margin-right: 15px;
           }
           .uname {
             font-size: 12px;
           }
         }
       }
       .cmt-body {
         font-size: 14px;
         line-height: 28px;
         text-indent: 2em;
         margin-top: 6px;
         word-break: break-all;
       }
       .cmt-footer {
         font-size: 12px;
         color: gray;
         margin-top: 10px;
       }
     }
   }
 .art-cmt-container-1 {
     padding-bottom: 46px;
   }
.art-cmt-container-2 {
     padding-bottom: 80px;
   }
   
   // 发布评论的盒子 - 1
   .add-cmt-box {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     box-sizing: border-box;
     background-color: white;
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 46px;
     line-height: 46px;
     padding-left: 10px;
     .ipt-cmt-div {
       flex: 1;
       border: 1px solid #efefef;
       border-radius: 15px;
       height: 30px;
       font-size: 12px;
       line-height: 30px;
       padding-left: 15px;
       margin-left: 10px;
       background-color: #f8f8f8;
     }
     .icon-box {
       width: 40%;
       display: flex;
       justify-content: space-evenly;
       line-height: 0;
     }
   }
   
   .child {
     width: 20px;
     height: 20px;
     background: #f2f3f5;
   }
   
   // 发布评论的盒子 - 2
   .cmt-box {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 80px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 12px;
     padding-left: 10px;
     box-sizing: border-box;
     background-color: white;
     textarea {
       flex: 1;
       height: 66%;
       border: 1px solid #efefef;
       background-color: #f8f8f8;
       resize: none;
       border-radius: 6px;
       padding: 5px;
     }
     .van-button {
       height: 100%;
       border: none;
     }
   }
   </style>